/* 学习目标：JSX中的插值表达式  */
// 语法： {表达式}
// 特殊：
// 1. null undefined boolean
// 2. 对象和数组
// 3. 💥💥不能出现语句
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.querySelector('#root'));

const msg = 'hello React';
const obj = {
  name: 'zs',
  child: {
    name: 'xzs',
  },
};

const list = [1, 2, 3];
const list2 = [<span>1</span>, <h2>2</h2>, <i></i>];
const ulNode = (
  <>
    <h1>{msg}</h1>
    <h1>{84}</h1>
    {/*  1. 💥💥 null undefined boolean 不会显示 */}
    <h1>{null}</h1>
    <h1>{undefined}</h1>
    <h1>{true}</h1>
    <h1>{false}</h1>

    {/* 2. 对象不能放在插值表达式中， 直接报错 */}
    {/* ❌下面的的代码会直接报错，注释掉即可 */}
    <h2>{obj.name}</h2>

    {/* 3.数组: 会把数组内的每项元素，当做一个个标签渲染出来 */}
    <h3>{list}</h3>
    <div>{list2}</div>
  </>
);

root.render(ulNode);
